<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="manage/layout :: common_header(~{::title})">
    <title>添加新闻分类-网站后台管理中心</title>
</head>
<body th:replace="manage/layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加新闻分类</legend>
    </fieldset>
    <link rel="stylesheet" href="/css/cp.css"/>

    <div class="cp-wrapper">

        <form id="uploadForm" enctype="multipart/form-data" class="layui-form">
            <input type="hidden" name="id" th:value="${cate.id}" />
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" th:value="${cate.name}" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea  name="detail" class="layui-textarea" th:text="${cate.content}" placeholder="请输入描述" ></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="number" name="sort" lay-verify="required" th:value="${cate.sort}" autocomplete="off" placeholder="排序，数字越大排序越靠前" class="layui-input">
                </div>
            </div>
            <dl class="cp-upload">
                <dt><span>分类图片</span><b>图片大小不能超过2M；建议尺寸为700*700</b></dt>
                <dd>
                    <p><img th:src="${cate.image}">
                        <input type="file" onchange="addImage(this)"/>
                        <input type="hidden" th:value="${cate.image}" name="image"  /><span><em>+</em><br>上传图片</span><i>分类图片</i>
                    </p>
                </dd>
            </dl>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script>
            layui.use(['form','layer'], function () {
                var form = layui.form;
                var layer = layui.layer;
                //监听提交
                form.on('submit(demo1)', function (data) {
                    //商品图片
                    var imgHas = true;
                    $("input[name^='image']").each(function (i, el) {
                        var img = $(this).val();
                        //console.log("图片" + i + "【" + img + "】");
                        if (i == 0) {
                            if ($(this).val() == "") {
                                //alert("请上传商品主图");
                                //$(this).focus();
                                imgHas = false;
                                return false;
                            }
                        }

                    });
                    if (imgHas == false) {
                        layer.msg("至少要上传一张图片")
                        return false;
                    }

                    var fd = new FormData($('#uploadForm')[0]);
                    $.ajax({
                        url: "/manage/news_category_add_submit",
                        type: "POST",
                        dataType: "JSON",
                        data: $('#uploadForm').serialize(),
                        success: function (res) {
                            if (res.code == 0) {
                                window.location.href = "/manage/news_category_list";
                            } else {
                                alert(res.msg);
                            }
                            // alert(JSON.stringify(res));
                            return false;
                        }
                    });


                    // layer.alert(JSON.stringify(data.field), {
                    //     title: '最终的提交信息'
                    // })
                    return false;
                });
            })


            function addImage(file) {
                var fd = new FileReader();
                var img = $(file).prev();
                var imgInput = $(file).next();
                fd.readAsDataURL(file.files[0]);
                fd.onload = function (e) {
                    img.attr('src',this.result);
                    img.css('display','block');
                    $.ajax({
                        url: "/upload_image_base64",
                        type: "POST",
                        data: {image: this.result},
                        // processData: false,
                        // contentType: false,
                        // cache: false,
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 0) {
                                imgInput.val(res.data.src);
                            } else {
                                alert(res.msg);
                            }
                        }
                    })
                };
            }
        </script>


    </div>
    <!-- end cp-wrapper -->

</div>
</body>
</html>
